<template>
	<div>
		<Revise />
		<AddRole :scopes="scopesData" />

		<el-table :data="userList.users" stripe border>
			<el-table-column type="index"> </el-table-column>
			<el-table-column label="姓名" prop="username"> </el-table-column>
			<el-table-column label="邮箱" prop="email"> </el-table-column>
			<el-table-column label="电话" prop="mobile"> </el-table-column>
			<el-table-column label="角色" prop="role_name"> </el-table-column>
			<el-table-column label="状态" prop="mg_state">
				<template v-slot="scope">
					<Switchs
						:data="{
							uld: scope.row.id,
							type: scope.row.mg_state,
						}"
					/>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template v-slot="scopes">
					<div class="btn">
						<Tooltip Tips="修改">
							<template>
								<el-row>
									<el-button type="primary" icon="el-icon-edit" circle size="small" @click="revise(scopes.row)"> </el-button>

								</el-row>
							</template>
						</Tooltip>

						<div>
							<Tooltip Tips="删除">
								<template>
									<el-row>
										<el-button type="danger" icon="el-icon-delete" circle size="small" @click="remove(scopes)"></el-button>

									</el-row>
								</template>
							</Tooltip>
						</div>
						<div>
							<Tooltip Tips="分配角色">
								<el-row>
									<el-button icon="el-icon-setting" type="success" circle size="small" @click="addRole(scopes.row)"> </el-button>

								</el-row>
							</Tooltip>
						</div>
					</div>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>
<script>
import Switchs from '../Switch.vue'
import Tooltip from '../users/Tooltip.vue'

import Revise from './revise.vue'
import AddRole from './AddRole.vue'
export default {
	name: 'Table',
	data() {
		return {
			userList: '',

			scopesData: '',

		}
	},
	components: {
		Switchs,
		Tooltip,
		Revise,
	AddRole
	},
	created() {
		this.$bus.$on('userList', data => {
			this.userList = data
		})
	},
	methods: {
		revise(data) {
			this.$bus.$emit('reviseData', data)
			this.$store.commit('Users/Revise')
		},
		remove(scopes) {
			this.$confirm('此操作将永久删除该用户?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {

					this.$http
						.delete(`users/${scopes.row.id}`)
						.then(response => {
							const { meta } = response.data
							if (meta.status == 200) {
								this.$message({
									type: 'success',
									message: '删除成功!',
								})
								this.$bus.$emit('update')
							} else {
								this.$message.error(meta.msg)
							}
						})
						.catch(error => {
							console.log(error.message)
						})
				})
				.catch(error => {
					console.log(error)
				})
		},
		addRole(data) {
			this.$bus.$emit('addRoleDialog', data)
		},

	},
}
</script>

<style scoped>
.el-table__header {
	margin: 0 !important;
}
.btn {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
</style>
